<<template>
    <div class="home-konwledges">
        <knowledge :cknowledges="knowledges"></knowledge>
        <div v-show="null !== knowledges && knowledges.length > 0"
            style="width: 100%;display:flex;justify-content: center;margin-top: 10px;">
            <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="total"
                @current-change="handleCurrentChange" />
        </div>
    </div>
</template>

    <script setup>
    import { selectKnowledgesPage } from "@/api/knowledge";
    import Knowledge from "@/components/Knowledge.vue";
    import { ref } from "vue";

    const knowledges = ref([]);
    const total = ref(0);
    const pageSize = ref(4);

    // 加载数据
    const load = async () => {
        await selectKnowledgesPage({ pageNum: 1, pageSize: pageSize.value }).then((res) => {
            if (res.flag == true) {
                knowledges.value = res.data.data;
                total.value = res.data.total;
            }
        });
    };
    load();

    // 分页
    const handleCurrentChange = (val) => {
        // 获取知识列表
        selectKnowledgesPage({ pageNum: val, pageSize: pageSize.value }).then((res) => {
            if (res.flag == true) {
                knowledges.value = res.data.data;
                total.value = res.data.total;
            }
        });
    }

    //查看详情
    const handleDetail = (item) => {
        this.$router.push(`/index/knowledge/${item.knowledgeId}`)
    }
</script>

    <style lang="scss" scoped>
    .home-konwledges {
        margin-top: 20px;
    }
</style>